import {
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Modal, message } from 'antd';
import {Editor} from "@bytemd/react";
import {useState} from "react";
import gfm from "@bytemd/plugin-gfm";
import MonacoEditor from "react-monaco-editor";

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const plugins = [
  gfm(),
  // Add more plugins here
]

const monacoOptions = {
  selectOnLineNumbers: true,
  automaticLayout: true,
};

export const CreateQuestionForm = (props) =>{

  const {visible,setVisible} = props
  const [createQuestionRequest, setCreateQuestionRequest] = useState<API.CreateQuestionRequest>({
    content: "",
    answer: ""
  });


  /**
   * 示例代码编辑器
   */
  const editorDidMount = (editor, monaco) => {
    console.log('editorDidMount', editor);
    editor.focus();
  }
  return (
    <>
      <StepsForm
        onFinish={async (values) => {
          console.log(values);
          await waitTime(1000);
          setVisible(false);
          message.success('提交成功');
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
        stepsFormRender={(dom, submitter) => {
          return (
            <Modal
              title="分步表单"
              width={1200}
              onCancel={() => setVisible(false)}
              open={visible}
              footer={submitter}
              destroyOnClose
            >
              {dom}
            </Modal>
          );
        }}
      >
        <StepsForm.StepForm
          name="base"
          title="基本内容"
          onFinish={async () => {
            await waitTime(2000);
            return true;
          }}
        >
          <ProForm.Group>
            <ProFormText
              name="name"
              width="md"
              label="标题"
              tooltip="最长为 24 位，用于标定的唯一 id"
              placeholder="请输入名称"
              rules={[{ required: true }]}
            />
            <ProFormText
              name="tags"
              width="md"
              label="题目标签"
              tooltip="最长为 24 位，用于标定的唯一 id"
              placeholder="请输入名称"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormSelect
              name="level"
              width="md"
              label="题目难度"
              tooltip="最长为 24 位，用于标定的唯一 id"
              placeholder="请输入名称"
              valueEnum={{
                0: '简单',
                1: '中等',
                2: '困难',
              }}
              rules={[{ required: true }]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormTextArea
              name="judgeConfig"
              width="md"
              label="判题配置"
              tooltip="最长为 24 位，用于标定的唯一 id"
              placeholder="请输入名称"
              rules={[{ required: true }]}
            />
            <ProFormTextArea
              name="judgeCase"
              width="md"
              label="判题用例"
              tooltip="最长为 24 位，用于标定的唯一 id"
              placeholder="请输入名称"
              rules={[{ required: true }]}
            />
          </ProForm.Group>

        </StepsForm.StepForm>

        <StepsForm.StepForm name="content" title="题目内容">

          <Editor
            value={createQuestionRequest?.content}
            plugins={plugins}
            onChange={(v) => {
              setCreateQuestionRequest({
                ...createQuestionRequest,
                content:v
              })
            }}
          />

        </StepsForm.StepForm>

        <StepsForm.StepForm name="answer" title="题目答案">

          <Editor
            value={createQuestionRequest?.answer}
            plugins={plugins}
            onChange={(v) => {
              setCreateQuestionRequest({
                ...createQuestionRequest,
                answer:v
              })
            }}
          />

        </StepsForm.StepForm>
        <StepsForm.StepForm name="sampleCode" title="示例代码">
          <MonacoEditor
            height="270"
            language="java"
            // theme={theme}
            theme="vs-dark"
            value={createQuestionRequest?.sampleCode}
            options={monacoOptions}
            onChange={(sampleCode) =>
              setCreateQuestionRequest({
                ...createQuestionRequest,
                sampleCode,
              })
            }
            editorDidMount={editorDidMount}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </>
  );
};
